<template>
  <div class="mapContent" style="color: #fff;">
    <el-card>
      <el-page-header @back="router.back()">
        <template #content>
          <span class="text-large font-600 mr-3" style="color: #fff;"> {{ route.query.title }} </span>
        </template>
      </el-page-header>
    </el-card>
    <div class="mapMain">
      <div id="container"
        style="height: 80%; width: 100%;box-shadow: 0px 4px 18px 0px rgba(248,216,82, 0.9);border-radius: 16px;"
      >
      </div>
=    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
// import { ElMessage } from 'element-plus'
import MapLoader from "@/utils/amap"

const route = useRoute()
const router = useRouter()

const mapInit = () => {
  MapLoader().then((AMap: any) => {
    window.hideGlobalLoading()
    const map = new AMap.Map('container', {
      // rotateEnable: true,
      center: [116.3972282, 39.9096045],
      jogEnable: true,
      zoom: 11.5
    })
  })
}

onMounted(() => {
  window.showGlobalLoading()
  mapInit()
})

</script>

<style lang="scss" scoped>
.mapContent {
  width: 100%;
  .el-card {
    border-radius: $base-card-border-radius;
  }
  .mapMain {
    width: 100%;
    height: 80vh;
    margin-top: 50px;
  }

}
</style>